<template>
    <div v-loading="initFlag" class="member-detail">
        <div v-if="!initFlag">
            <div style="color: #666666;margin: 0 0 0.6em">学员详情</div>
            <div class="card-box xy-center jf-start al-str">
                <div class="xy-center member-msg b-r">
                    <el-avatar :size="90" :src="coverImage(member.header)">
                        <img
                            src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                        />
                    </el-avatar>
                    <div
                        class="yx-center al-start item al-str"
                        style="margin-left: 1.4em"
                    >
                        <div class="bold" style="font-size: 1.2em">
                            {{ member.name }}
                        </div>
                    </div>
                </div>
                <div class="xy-between member-msg al-str" style="flex-grow: 1;">
                    <div class="yx-between al-start item">
                        <div>用户名：{{ member.userName }}</div>
                        <div>学号：{{ member.stuNo }}</div>
                        <div>手机号：{{ member.mobile }}</div>
                        <div>email：{{ member.email }}</div>
                        <div>性别：{{ member.sex ==="boy"?"男":"女"}}</div>

                        <div v-if="member.groupName">
                            绑定机构 ：{{
                                member.groupName
                            }}
                        </div>
                        <div v-if="member.expireTime">
                            过期时间 ：{{
                                member.expireTime
                            }}
                        </div>
                    </div>
                    <div class="yx-between al-start item">
                        <div>
                            注册来源：{{
                                userChannelType[member.channelType].desc
                            }}
                        </div>
                    </div>
                    <div class="yx-between al-start item">
                        <div>注册时间：{{ member.createdTime }}</div>
                        <div>
                            最后登录IP：{{
                                member.loginInfo && member.loginInfo.loginIp
                            }}
                        </div>
                        <div>
                            最后登录时间：{{
                                member.loginInfo && member.loginInfo.loginTime
                            }}
                        </div>
                    </div>
                    <div class="yx-center al-start item">
                        <el-switch
                            :value="member.userStatus === 'normal'"
                            active-color="#13ce66"
                            inactive-color="#dcdcdc"
                            active-text="启用"
                            inactive-text="禁用"
                            @change="changeUserStatus"
                        >
                        </el-switch>
                    </div>
                </div>
            </div>
        </div>
        <div style="color: #666666;margin: 2em 0 0.6em">资产情况(产品)</div>
        <div class="card-box xy-center jf-start course-box">
            <div
                v-for="asset in userCourse"
                :key="asset.id"
                class="course-title-card pointer"
                :class="{ active: activeCourse === asset.id }"
            >
                <el-badge
                    :hidden="asset.loading"
                    :value="asset.effective ? '有效' : '无效'"
                    class="item"
                    :type="asset.effective ? 'primary' : 'danger'"
                >
                    <div class="course-title-card-title">
                        {{ asset.assets.categoryNameList +"-" +asset.assets.name }}
                    </div>
                </el-badge>
                <i
                    v-if="asset.loading"
                    class="el-icon-loading green"
                    style="position: relative;top:-0.5em;"
                ></i>
            </div>
            <div
                v-if="!userCourse || userCourse.length === 0"
                class="course-title-card"
            >
                无购买栏目
            </div>
        </div>
        <div style=" color: #666666;margin: 2em 0 0.6em"></div>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import { VuePage } from "@/layout/mixin/iVue";
import { mapState } from "vuex";
import { get, put, post } from "@/api/request";
export default {
    mixins: [VuePage],
    data() {
        return {
            member: null,
            userCourse: [],
            activeCourse: null,
            initFlag: true,
            stuCardChange: false,
            changeLoading: false,
            stuDataOld: null,
            stuDataNew: null
        };
    },
    computed: {
        ...mapState({
            userChannelType: state => state.status.userChannelType,
            deviceType: state => state.status.deviceType
        }),
        id() {
            return this.$route.query.id;
        }
    },
    created() {
        this.init();
        this.setCache = {};
    },
    methods: {
        init() {
            Promise.all([
                Fetch.get("/user/cu/member/detail", {
                    id: this.id
                }).then(data => {
                    this.member = data;
                }),
                Fetch.get("/order/user-assets/user-have", {
                    userId: this.id,
                    assetType: "product",
                    size: 1000
                }).then(data => {
                    this.userCourse.push(
                        ...data.records
                            .filter(d => {
                                if (this.setCache[d.assets.id]) {
                                    this.setCache[d.assets.id].date.push([
                                        d.startTime,
                                        d.endTime
                                    ]);
                                    this.setCache[d.assets.id].effective =
                                        this.setCache[d.assets.id].effective ||
                                        d.status === "effective";
                                    return false;
                                }
                                d.date = [[d.startTime, d.endTime]];
                                d.loading = false;
                                d.effective = d.status === "effective";
                                this.setCache[d.assets.id] = d;
                                return true;
                            })
                            .map(d => d)
                    );
                    // if (this.userCourse.length > 0) {
                    //     this.courseChange(this.userCourse[0], false);
                    //     this.activeCourse = this.userCourse[0].id;
                    // }
                })
            ]).then(() => {
                this.initFlag = false;
            });
        },
        afterEnter() {
            this.stuDataOld = this.stuDataNew;
            this.stuCardChange = false;
        },
        changeUserStatus(status) {
            Fetch.post(
                `/user/cu/admin/user/enable/${status}/${this.member.id}`
            ).then(res => {
                this.member.userStatus = status ? "normal" : "lock";
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.member-detail {
    width: 100%;
    height: 100%;
    padding: 15px;
    font-size: 14px;
    .item {
        > * {
            line-height: 25px;
        }
    }
    ::v-deep .el-progress-circle {
        width: 5.5em !important;
        height: 5.5em !important;
    }
}

.card-box {
    background-color: #ffffff;
    border-radius: 0.3em;
    padding: 0.5em 0.8em;
    flex-wrap: wrap;
}

.card-box-1 {
    padding: 0.5em 1.3em;
}

.dc {
    color: #9d9d9d;
}

.member-msg.b-r {
    border-right: 1px solid #dbdbdb;
    padding-right: 2em;
    margin-right: 2em;
}

.member-msg .item {
    flex-grow: 1;
    padding: 1em 0;
}

.course-box {
    padding: 1em 0.8em;
}

.course-title-card {
    min-width: 8em;
    height: 3em;
    line-height: 3em;
    margin-right: 2em;
}

.course-title-card.active {
    color: #1ab6a9;
}

.stu-box {
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    top: 0;
}

.stu-box .stu-card {
    width: 30%;
    margin-bottom: 2em;
    margin-right: 2em;
}

.stu-card .title {
    font-size: 1.3em;
    height: 3em;
    font-weight: bold;
}

.progress {
    margin-right: 3em;
}

.progress-text {
    margin-top: 1em;
}

.asset-date {
    color: red;
    font-size: 13px;
    margin-bottom: 0.5em;
}

.course-title-card-title {
    padding: 0 1em;
}

.el-progress-circle {
    width: 5.5em !important;
    height: 5.5em !important;
}

.el-progress__text {
    color: #009688;
}
</style>
